import React from "react";
import ReactDOM from 'react-dom';
import { TextField } from "office-ui-fabric-react/lib/TextField";
import {
  DefaultButton,
  PrimaryButton
} from "office-ui-fabric-react/lib/Button";
import { Modal } from "office-ui-fabric-react/lib/Modal";
import axios from "axios";
import sha512 from "crypto-js/sha512";

const baseUrl = "http://127.0.0.1:3000/";
export class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      disabled: false,
      name: "",
      pass: ""
    };
    this._alertClicked = this._alertClicked.bind(this);
    this._closeModal = this._closeModal.bind(this);
  }
  _alertClicked() {
    alert(this.state.name, this.state.pass);
  }
  regNew(e) {
    // 注册新用户
    e.preventDefault();
    e.stopPropagation();
    this.setState({
      disabled:true,
    })
    let random = Math.random();
    random = random.toString().split(".")[1];
    if (!random) {
      return;
    }
    let p = "";
    let n = "";
    for (let i of this.state.name) {
      console.log(i);
      p += i.charCodeAt(0).toString();
    }
    for (let i of this.state.pass) {
      console.log(i);
      n += i.charCodeAt(0).toString();
    }
    let mix = sha512(n + p).toString();

    // let mixSha512 = sha512(mix + random + 'salt').toString();
    if (!mix || this.state.name.length < 1 || this.state.pass.length < 1) {
      return;
    }
    axios({
      // 创建用户用
      method: "POST",
      url: "http://127.0.0.1:3000/cUser",
      data: {
        m: mix,
        salt: random,
        name: this.state.name
      }
      //   headers: { "Access-Control-Allow-Origin": "*" }
    })
      .then(d => {
        console.log(d);    
        this.setState({
          showModal: true,
          disabled:false,
          modalString: '用户创建成功',
        });  
      })
      .catch(e => {
        console.error(e);
        this.setState({
          disabled:false,
        })
      });
  }
  login(e) {
    // 登陆
    e.preventDefault();
    e.stopPropagation();
    this.setState({
      disabled:true,
    })
    let random = Math.random();
    random = random.toString().split(".")[1];
    let p = "";
    let n = "";
    for (let i of this.state.name) {
      p += i.charCodeAt(0).toString();
    }
    for (let i of this.state.pass) {
      n += i.charCodeAt(0).toString();
    }
    let mix = sha512(n + p).toString();
    axios
      .get(baseUrl + "getUserSalt", {
        params: {
          name: this.state.name.trim()
        }
      })
      .then(d => {
        console.log(d);
        if (d.data.code === 0) {
          const salt = d.data.result;
          let loginSha512 = sha512(mix + random + salt).toString();
          axios
            .post(baseUrl + "loginwithpass", {
              name: this.state.name.trim(),
              hash: loginSha512,
              r: random
            })
            .then(d => {
              console.log(d);
              this.setState({
                disabled:false,
              });
              console.log(this.props)
              this.props.loginSucess();
            })
            .catch(e => {
              throw(e.data);
            });
        } else {
          throw d.data;
        }
      })
      .catch(e => {
        console.error(e);
        this.setState({
          showModal: true,
          disabled:false,
          modalString: JSON.stringify(e.data || e)
        });        
      });
  }
  changeu(e) {
    this.setState({
      name: e.target.value.trim()
    });
  }
  changep(e) {
    this.setState({
      pass: e.target.value.trim()
    });
  }
  _closeModal(){
    this.setState({ showModal:false })
  }
  render() {
    return (
      <div className="login-page">
        <div className="box">
          <div className="title">请登陆</div>
          <div className="input-area">
            <div className="input-block">
              <TextField
                label="账号 ："
                underlined
                required={true}
                onChange={e => this.changeu(e)}
                type="text"
              />
            </div>
            <div className="input-block">
              <TextField
                label="密码 ："
                underlined
                required={true}
                onChange={e => this.changep(e)}
                type="password"
              />
            </div>
          </div>
          <div className="register" onClick={e => {}}>
            忘记密码？
          </div>
          <div className="btn-panel">
            <DefaultButton
              data-automation-id="test"
              allowDisabledFocus={false}
              disabled={this.state.disabled}
              text="注册"
              onClick={e => this.regNew(e)}
              className="reg-btn"
            />
            <PrimaryButton
              data-automation-id="test"
              disabled={this.state.disabled}
              text="登陆"
              onClick={e => this.login(e)}
              allowDisabledFocus={false}
            />
          </div>
        </div>
        <div className="bottom-info">一些信息</div>
        <Modal
          titleAriaId="titleId"
          subtitleAriaId="subtitleId"
          isOpen={this.state.showModal}
          onDismiss={this._closeModal}
          isBlocking={false}
          containerClassName="ms-modalExample-container"
        >
        <div className="modal-win">
          {this.state.modalString}
        </div>
        </Modal>
      </div>
    );
  }
}
